<template>
    <div class="nb" id="Nb"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("Nb")).setOption({
                title: {
                    text: '|  公区能耗',
                    textStyle: {
                        color: '#B1E2FE',
                        fontSize: '12'
                    }
                },
                color: ['#C23531', '#4EDA10'],
                legend: {
                    data: ["用水", "用电"],
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                backgroundColor: 'rgba(0,0,0,0.2)',
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '(万吨)',
                        position: 'left',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#eee'
                            }
                        }

                    },
                    {
                        type: 'value',
                        name: '万度',
                        position: 'right',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#eee'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '用水',
                        type: 'line',
                        yAxisIndex: 0,
                        data: [4.05, 4.62, 3.17, 2.37, 4.3, 4.74, 8.86, 6.58, 7.53, 7.28],
                        lineStyle: {
                            color: '#C23531',
                        },
                    },
                    {
                        name: '用电',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [418, 424, 405, 420, 396, 464, 587, 647, 623, 484],
                        lineStyle: {
                            color: '#4EDA10',
                        },
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                    }
                ],
                textStyle: {
                    color: '#fff'
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.nb {
    width: 100%;
    height: 200px;
    color: #fff;
}
</style>
  